<template>
  <div v-if="yueInnerVisible">
    <div
      v-if="yueInnerVisible"
      class="yueMask"
      style="position: fixed;top:0;left:0;right:0;bottom:0;opacity: .5;background: #000;z-index: -1"
    />
    <el-dialog
      id="yueusersDialog"
      :visible.sync="yueInnerVisible"
      :modal="false"
      v-if="yueInnerVisible"
      top="0"
      width="800px"
      append-to-body
      custom-class="yueusersDialog"
    >
      <span class="percent">已阅率：{{ `${Math.round((readUserData.length/(readUserData.length+unreadUserData.length))*100 * 10) / 10}%` }}</span>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        type="card"
      >
        <el-tab-pane name="first">
          <span slot="label">{{ $t('m.weiyou_read') }}（{{ readUserData.length }}）</span>
          <div class="userList">
            <div
              v-for="(item, index) in getReadUsers"
              :key="index"
              class="userItem"
            >
              <div
                v-html="item.photo"
                class="headerImg"
              />
              <div class="username">
                <span class="name">{{ item.userName }}</span>
                <span class="time"> {{ item.updateTime }} </span>
              </div>
            </div>
          </div>
          <Nodata v-if="noyiyueData" />
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">{{ $t('m.weiyou_unread') }}（{{ unreadUserData.length }}）</span>
          <div class="nouserList">
            <div
              v-for="(item, index) in getUnreadUsers"
              :key="index"
              class="nouserItem"
            >
              <div
                v-html="item.photo"
                class="headerImg"
              />
              <div class="username">
                <span class="name">{{ item.userName }}</span>
                <span class="time"> {{ item.updateTime }} </span>
              </div>
            </div>
          </div>
          <Nodata v-if="noweiyueData" />
        </el-tab-pane>
      </el-tabs>

      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          v-if="activeName == 'second' && mailObj.sendUserId == getCurUser"
          @click="remindAll"
          type="warning"
        >
          {{ $t('m.weiyou_allremind') }}
        </el-button>
        <el-button @click="yueInnerVisible = false">
          {{ $t('m.weiyou_close') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  sendRemind,
  getReadList,
  getUnreadList,
} from '../actions/actions';
import Nodata from '../../../components/noData/index';
import getMaxZindex from '../util/getZindex';

export default {
  name: 'YueUserList',
  components: { Nodata },
  props: {
    mailObj: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      yueInnerVisible: false,
      readUserData: [],
      unreadUserData: [],
      activeName: 'first',
      noyiyueData: false,
      noweiyueData: false,
    };
  },
  computed: {
    getReadUsers() {
      this.readUserData.forEach((item, index) => {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.readUserData[index].photo = JE.getUserPhoto(item.userId, true);
      });
      return this.readUserData;
    },
    getUnreadUsers() {
      this.unreadUserData.forEach((item, index) => {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.unreadUserData[index].photo = JE.getUserPhoto(item.userId, true);
      });
      return this.unreadUserData;
    },
    getCurUser() {
      return JE.currentUser.userId;
    },
  },
  watch: {
    yueInnerVisible(nv) {
      if (nv) {
        // 处理展示层级
        this.$nextTick(() => {
          setTimeout(() => {
            $('#yueusersDialog').css({ 'z-index': getMaxZindex() + 2 });
            $('.yueMask').css({ 'z-index': getMaxZindex() - 1 });
          });
        });
        this.loadReadList();
        this.loadUnreadList();
      }
    },
  },
  mounted() {
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.loadReadList();
        me.loadUnreadList();
      });
    } else {
      me.loadReadList();
      me.loadUnreadList();
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.index == '0') {
        this.loadReadList();
      } else if (tab.index == '1') {
        this.loadUnreadList();
      }
    },
    // 加载已阅列表
    loadReadList() {
      this.noyiyueData = false;
      getReadList({ id: this.mailObj.id, limit: -1 }).then((data) => {
        if (data.success) {
          if (data.rows.length === 0) {
            this.noyiyueData = true;
          }
          this.readUserData = data.rows;
        }
      });
    },
    // 加载未阅列表
    loadUnreadList() {
      this.noweiyueData = false;
      getUnreadList({ id: this.mailObj.id, limit: -1 }).then((data) => {
        if (data.success) {
          if (data.rows.length === 0) {
            this.noweiyueData = true;
          }
          this.unreadUserData = data.rows;
        }
      });
    },
    // 全部提醒
    remindAll() {
      const ids = [];
      this.unreadUserData.forEach((item) => {
        ids.push(item.userId);
      });
      sendRemind({ id: this.mailObj.id, userId: ids.join(',') }).then((data) => {
        if (data.success) {
          JE.msg(data.obj.msg);
          this.yueInnerVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.yueusersDialog {
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  .el-dialog__headerbtn {
    top: 12px;
  }
  .el-dialog__body {
    padding: 0 20px;
    .percent {
      position: absolute;
      top: 41px;
      left: 260px;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      border-left: 1px solid rgba(236, 236, 236, 1);
      border-right: 1px solid rgba(236, 236, 236, 1);
      overflow: auto;
      height: 450px;
      padding: 0 10px;
    }
    .userList {
      width: 100%;
      overflow: auto;
      position: relative;
      .userItem {
        float: left;
        width: 50%;
        overflow: hidden;
        margin-top: 10px;
        .headerImg {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          float: left;
        }
        .username {
          float: left;
          width: 300px;
          padding: 0 20px;
          height: 45px;
          line-height: 36px;
          // border-bottom: 1px solid rgba(236, 236, 236, 1);
          .time {
            float: right;
          }
        }
      }
    }

    .nouserList {
      width: 100%;
      overflow: auto;
      position: relative;
      .nouserItem {
        float: left;
        width: 33.3%;
        margin-top: 10px;
        padding-left: 70px;
        overflow: hidden;
        display: flex;
        .headerImg {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          float: left;
        }
        .username {
          padding: 0 20px;
          height: 45px;
          line-height: 36px;
          padding-left: 55px;
          // border-bottom: 1px solid rgba(236, 236, 236, 1);
        }
      }
    }
    /* .userList:after {
      content: " ";
      position: absolute;
      top: 5px;
      bottom: 0;
      width: 1px;
      background: rgba(236, 236, 236, 1);
      border-radius: 1px;
      left: 50%;
      transform: translateX(-50%);
    } */
  }
  .el-dialog__footer {
    margin: 0 20px;
    padding: 10px 0;
    border-left: 1px solid rgba(236, 236, 236, 1);
    border-right: 1px solid rgba(236, 236, 236, 1);
    border-bottom: 1px solid rgba(236, 236, 236, 1);
  }
}
</style>
